import { RadioGroup, Space, type RadioGroupProps } from "ant-design-vue";
import { defineComponent, ref } from "vue";

export const TestRadioGroup = defineComponent({
  setup() {

    const TestA = defineComponent({
      setup() {
        return () => (
          <div style="color: red">div test</div>
        )
      }
    })
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    const optionsWithDisabled: RadioGroupProps['options'] = [
      { label: <TestA />, value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange', disabled: true },
    ];
    const value1 = ref<string>('Apple');
    const value2 = ref<string>('Apple');
    const value3 = ref<string>('Apple');

    return () => {
      return (
        <Space direction="vertical">
          <RadioGroup v-model:value={value1.value} options={plainOptions} />
          <RadioGroup v-model:value={value2.value} options={optionsWithDisabled} />
          <RadioGroup v-model:value={value3.value} options={plainOptions} disabled />
          <RadioGroup v-model:value={value1.value} option-type="button" options={plainOptions} />
          <RadioGroup v-model:value={value2.value} option-type="button" options={optionsWithDisabled} />
          <RadioGroup v-model:value={value3.value} option-type="button" options={plainOptions} disabled />
        </Space>
      )
    }
  }
})